<template>
  <view class="content">
    <view v-if="shoplist.length > 0" class="hearBox">

      <view class="boxConent" v-for="(item, index) in shoplist" :key="index" @tap="gotoshop(item)">
        <view class="TopConent">
         <view class="shopImg">
          <image :src="item.merchantHead" mode="widthFix"></image>
         </view>
          <view class="shopRight">
            <view class="RightTop">
              <view class="shopName">
                {{ item.merchantName }}
              </view>
              <image @tap.stop="del(item)" class="IconImg" src="../static/image/pagesMine/delimg.png">

              </image>
            </view>
            <view class="RightConcent">
              <view class="Star">
                <image src="../static/image/pagesMine/Star.png"
                  v-for="(itemStar, indexStar) in Math.floor(item.merchantScore)" :key="indexStar" mode="scaleToFill" />
                <image src="../static/image/pagesMine/halfwayStar.png" v-show="item.merchantScore % 1 !== 0"
                  mode="scaleToFill" />
                <view class="">
                  {{ item.merchantScore }}
                </view>
              </view>
            </view>
            <!-- <view class="RightBottom">
              <text class="" style="color: #f00; background-color:rgb(236, 162, 162);">
                好吃不贵
              </text>
              <text class="" style="color: #0057FF; background-color:#94b0e7;">
                价格实惠
              </text>
              <text class="" style="color: #16D356; background-color:#9fecb9;">
                口碑好
              </text>
              <text class="" style="color: #FFC123; background-color:#ffecbd;">
                种类全
              </text>
            </view> -->
          </view>
        </view>
      </view>
    </view>
    <u-empty mode="favor" v-else style="padding-top: 500rpx;"></u-empty>
  </view>
</template>
<script>
import { selectFavoriteMerchant } from '@/api/main'
import { collectMerchant } from '@/api/common'
export default {
  data() {
    return {
      list: [],
      shoplist: [],

    };
  },
  onReady() { },
  onShow() {
    this.collection()
  },
  onLoad() {

  },
  methods: {
    collection() {
      selectFavoriteMerchant().then(res => {
        console.log('收藏店铺', res.data.appMerchants.length)
        if (res.data.total = 0) {
          console.log('没有数据')
          this.shoplist = []
        } else {
          this.shoplist = res.data.appMerchants
          console.log('还有数据')
        }
      })
    },
    del(item) {
      console.log(item, '看看数据')
      let obj = {
        merchantId: item.merchantId
      }
      let that = this
      uni.showModal({
        title: '删除',
        content: '您确定取消收藏店铺嘛！',
        success: function (res) {
          if (res.confirm) {
            collectMerchant(obj).then(res => {
              console.log('取消收藏', res)
              that.collection()
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
          
    },
    gotoshop(item) {
      console.log('看看item', item.merchantTakeout)
      if (item.merchantTakeout == 1) {
        uni.navigateTo({
          url: '/pagesDelivery/deliveryDetail?detailid=' + item.merchantId
        })
      } else if (item.merchantTakeout == 2) {
        uni.navigateTo({
          url: '/pagesHealth/goHistoryDetail?detailid=' + item.merchantId
        })
      } else if (item.merchantTakeout == 3) {
        uni.navigateTo({
          url: '/pagesAgriculture/agricultureDetail?id=' + item.merchantId
        })
      } else if (item.merchantTakeout == 4) {
        uni.navigateTo({
          url: '/pagesMaintain/maintainDetail?id=' + item.merchantId
        })
      }
    }
  }
};
</script>

<style scoped lang="scss">
.content {
  background-color: #F5F5F5;
  padding-bottom: 24rpx;
  min-height: 100vh;

  .hearBox {
    padding: 0 32rpx;

    .boxConent {
      border-top: solid 24rpx #F5F5F5;
      background-color: #fff;
      border-radius: 8rpx;

      .TopConent {
        display: flex;

        .shopImg {
          width: 156rpx;
          height: 156rpx;
          margin: 24rpx;
          border-radius: 12rpx;
          overflow: hidden;

          image {
            width: 100%;
            min-height: 156rpx;
            border-radius: 12rpx;
          }
        }

        .shopRight {
          flex: 1;
          margin: 30rpx 24rpx 18rpx 0;

          .RightTop {
            display: flex;
            width: 100%;
            justify-content: space-between;

            .IconImg {
              width: 28rpx;
              height: 28rpx;
              border-radius: 50%;
            }

            .shopName {
              width: 90%;
              font-weight: bold;
              font-size: 32rpx;
            }
          }

          .RightConcent {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #999;
            font-size: 26rpx;

            .Star {
              display: flex;
              align-items: center;
              height: 80rpx;
              line-height: 80rpx;

              view {
                font-size: 26rpx;
                margin-left: 8rpx;
                color: #999;
              }

              image {
                width: 24rpx;
                height: 24rpx;
              }
            }

          }

          .RightBottom {
            font-size: 20rpx;

            text {
              margin-right: 20rpx;
              display: inline-block;
              text-align: center;
              width: 96rpx;
              height: 28rpx;
              line-height: 28rpx;
              border-radius: 198rpx;
            }
          }

        }
      }

      .base {
        padding: 24rpx;
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;

        .baseLeft {
          display: flex;

          text {
            margin-left: 24rpx;
            margin-top: -10rpx;
            color: #999999;
            font-size: 28rpx;
          }

          image {
            width: 24rpx;
            height: 22rpx;
          }
        }

        .baseRight {
          display: flex;
          align-items: center;

          image {
            width: 24rpx;
            height: 24rpx;
            margin-right: 18rpx;
          }

          text {
            color: #D12C25;
            font-size: 28rpx;
            font-family: PingFang SC, PingFang SC;
          }
        }
      }

      .Phone {
        border-top: 18rpx solid #F5F5F5;

        .PhoneBox {
          display: flex;

          .PhoneImg {
            width: 156rpx;
            height: 156rpx;
            margin: 24rpx;
            border-radius: 12rpx;
          }

          .PhoneRight {
            flex: 1;
            margin: 30rpx 24rpx 18rpx 0;

            .PhoneTop {
              display: flex;
              width: 100%;
              justify-content: space-between;

              .IconImg {
                width: 28rpx;
                height: 28rpx;
                border-radius: 50%;
              }

              .shopName {
                font-weight: bold;
                font-size: 32rpx;
              }
            }

            .PhoneBottom {
              font-size: 20rpx;

              text {
                margin-right: 20rpx;
                display: inline-block;
                text-align: center;
                width: 96rpx;
                height: 28rpx;
                line-height: 28rpx;
                border-radius: 198rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>